<template>
  <div >
    <!--最新课程-->
    <div style="width: 100%;background:  #F5F5F5">
      <div style="width: 1500px;padding:10px 0;margin: 0 auto;">
      <el-row style="width: 80%;margin-left: 10%;margin-bottom: 20px; ">
        <el-col :span="21" style=""><div>
          <div >
            <div style="float: left;height: 30px;width:3px;background: black;margin-top: 2px"></div>
            <div style="font-size: 25px;margin-left: 10px">最新课程</div>
          </div>
        </div></el-col>
        <el-col :span="3"><div>
          <router-link to="/Course"><el-link  :underline="false" type="info" style="margin-top: 10px">更多课程></el-link></router-link>
        </div></el-col>
      </el-row>
      <el-row :gutter="10" style="width: 80%;margin-left: 10%">
        <el-col :span="6" v-for="(item1,index) in  timecourses" :key="index" style="margin-bottom: 10px">
          <div  class="divs">
          <router-link :to="{path:'/outline',query:{type:imgList[index].type,all:JSON.stringify(item1) }}">
            <el-card :body-style="{ padding: '0px',height:'200px'}">
              <img v-bind:src="item1.cover" width="100%" height="140px"/>
              <div>
                <div class="content" style="width: 100%">
                  <div>{{item1.title}}</div>
                  <span v-if="item1.isFree==1" style="color: red;font-size: 18px">免费</span>
                  <span v-if="item1.isFree==0" style="color: red;font-size: 18px">
                      <span class="price" style="color: red;font-size: 18px">￥{{item1.courseOriginal}}</span>
                      <span class="sprice" style="color: red;font-size:14px ">SVIP:￥{{item1.courseSvip}}</span>
                    </span>
                </div>
              </div>
            </el-card>
          </router-link>
          </div>
        </el-col>
      </el-row>
    </div>
    </div>
    <!--精品课程-->
    <div style="width: 1500px;padding:10px 0;margin: 0 auto;" v-for="(item,index) in zonename" :key="index">
      <!--<div>{{selectByZone(1)}}</div>-->
      <el-row style="width: 80%;margin-left: 10%;margin-bottom: 20px">
        <el-col :span="21"><div>
          <div style="">
            <div style="float: left;height: 30px;width:3px;background: black;margin-top: 2px"></div>
            <!--热门-->
            <div style="font-size: 25px;margin-left: 10px">{{item.pname}}</div>
          </div>
        </div></el-col>
        <el-col :span="3"><div>
          <router-link to="/Course"><el-link :underline="false" type="info" style="margin-top: 10px">更多课程></el-link></router-link>
        </div></el-col>
      </el-row>
      <el-row :gutter="10" style="width: 80%;margin-left: 10%">
        <el-col :span="6" v-for="(item1,index1) in item.eduCourseList " :key="index1" style="margin-bottom: 10px">
          <div  class="divs" style="height: 200px">
          <router-link :to="{path:'/outline',query:{type:imgList2[index].type,all:JSON.stringify(item1)  }}">
              <el-card :body-style="{ padding: '0px',height:'200px'}">
                <img v-bind:src="item1.cover" width="100%" height="140px"/>
                <div>
                  <div class="content" style="width: 100%">
                    <div>{{item1.title}}</div>
                    <span v-if="item1.isFree==1" style="color: red;font-size: 18px">免费</span>
                    <span v-if="item1.isFree==0" style="color: red;font-size: 18px">
                      <span class="price" style="color: red;font-size: 18px">￥{{item1.courseOriginal}}</span>
                      <span class="sprice" style="color: red;font-size:14px ">SVIP:￥{{item1.courseSvip}}</span>
                    </span>
                  </div>
                </div>
              </el-card>
          </router-link>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>


<script>
    export default {
      name: "Body2",
      data() {
        return {
          imgList: [
            {imgurl:'/static/img/img/z1.jpg',price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课（含12门课程）",type:"out1",
              title:[{FTitle:"套餐整体介绍以及如何观看学习",CTitle:["套餐整体介绍以及如何观看学习"]}
                    ],teacher:"debug",intro:"曾担任阿里大文娱事业部Java高级后端工程师，长期扎根于一线编码开发、系统架构设计与项目管理，拥有多年开发与管理经验，目前是一名互联网行业的创业者； 出版的书籍：《分布式中间件技术实战（Java版）》、《Spring Boot企业级项目开发-入门到精通》 ，51CTO学院、CSDN学院、网易云课堂等教育平台知名讲师，教授学生上万人，拥有大量原创博客，博客访问量达百万人次； 追求技术，热爱分享，相信技术改变生活，技术成就梦想，一直在不断的学习和积累新的知识，秉承修罗之道，花名“阿修罗”（修罗debug）。\n" +
        "熟悉行业Java领域流行技术，包括Spring、SpringMVC、Hibernate、Mybatis、SpringBoot、SpringCloud等核心框架，拥有缓存组件Redis、消息中间件RabbitMQ、服务调度框架Dubbo、服务调度协调管理中心Zookeeper、分布式任务调度框架Elastic-Job、全文搜索引擎Elastic-Search等三方框架、中间件多年实战经验",timg:"/static/img/headimg/debug.jpg"
      },
            {imgurl: require('../../assets/img/z2.jpg'),price:"2447.00",sprice:"1999.00",name:"Java核心技术-典型案例与面试实战系列二",type:"out2",
              title:[{FTitle:"准备篇",CTitle:["课程整体介绍与系统演示","课程学习收益与要求","项目工程搭建"]},
                     {FTitle:"实战篇之企业功能模块的设计与CRUD代码实现",CTitle:["APP应用版本管理之分页模糊搜索 ","APP应用版本管理之新增与获取详情一 ","APP应用版本管理之新增与获取详情二 ","APP应用版本管理之小作业-复杂SQL关联查询 "]},
                     {FTitle:"实战篇之Java生成二维码",CTitle:["基于Google开发工具包生成二维码图片  ","基于Hutool开发工具包生成二维码图片"]},
                     {FTitle:"实战篇之彻底搞定百万级别数据量的导出(Excel表格)",CTitle:["多线程批量预生成百万级别的数据","基于POI导出Excel(传统方式)一 ","基于POI导出Excel(传统方式)二 "," 基于POI导出Excel(数据库索引+多线程) ","基于EasyExcel导出Excel(多线程) ","两种实现方式的总结与对比 "]},
                     {FTitle:"实战篇之消息延迟处理系列之邮件定时发送实战",CTitle:["邮件定时发送实战之基于RabbitMQ死信队列实现一 ","基于POI导出Excel(传统方式)一 ","邮件定时发送实战之基于RabbitMQ死信队列实现二 ","邮件定时发送实战之基于RabbitMQ死信队列实现三 ","邮件定时发送实战之基于RabbitMQ延迟队列实现 "]},
                     {FTitle:"实战篇之商城平台用户订单实战",CTitle:["商城平台用户订单实战之用户下单  ","订单超时未支付自动失效与获取订单详情 ","取消订单与实现方式的弊端分析  ","基于Redisson延迟队列完善下单流程 ","基于Redisson延迟队列完善取消订单流程  "]},
                     {FTitle:"实战篇之产品首页功能模块数据的高效获取",CTitle:["首页功能模块数据的高效获取之传统实现方式-同步流模式  ","首页功能模块数据的高效获取之多线程+FutureTask模式 "]},
                     {FTitle:"实战篇之分布式集群部署模式Session共享实战",CTitle:["整体介绍与项目打包部署上线初探   ","Nginx负载均衡策略之源地址哈希法IP_Hash ","Nginx负载均衡策略之轮询法 ","Nginx负载均衡策略之Shiro+Redis实现Session共享 "]},
              ],teacher:"debug",intro:"曾担任阿里大文娱事业部Java高级后端工程师，长期扎根于一线编码开发、系统架构设计与项目管理，拥有多年开发与管理经验，目前是一名互联网行业的创业者； 出版的书籍：《分布式中间件技术实战（Java版）》、《Spring Boot企业级项目开发-入门到精通》 ，51CTO学院、CSDN学院、网易云课堂等教育平台知名讲师，教授学生上万人，拥有大量原创博客，博客访问量达百万人次； 追求技术，热爱分享，相信技术改变生活，技术成就梦想，一直在不断的学习和积累新的知识，秉承修罗之道，花名“阿修罗”（修罗debug）。\n" +
                "熟悉行业Java领域流行技术，包括Spring、SpringMVC、Hibernate、Mybatis、SpringBoot、SpringCloud等核心框架，拥有缓存组件Redis、消息中间件RabbitMQ、服务调度框架Dubbo、服务调度协调管理中心Zookeeper、分布式任务调度框架Elastic-Job、全文搜索引擎Elastic-Search等三方框架、中间件多年实战经验",timg:"/static/img/headimg/debug.jpg"
            },



            {imgurl: require('../../assets/img/z3.jpg'),price:"599.00",sprice:"549.00",name:"基于电商业务的企业级大中台从设计到实现(第二阶段)",type:"out1",teacher:"友凡 ",
              intro:"多年移动互联网产品设计和开发经验，带领团队完成多个知名互联网产品，历任多家知名公司Java和大数据架构师，负责过多个大型Java和大数据系统的架构和开发。精通Java、Go、Python、Hadoop、Storm、Spark、Docker、NoSQL等语言和大数据技术，IT一线行业8年实战经验，目前已经出品《秒杀系统》《分布式任务调度》《数据统计分析系统》等教程，教程案例全部均来自真实工业界开发场景。对分布式、高并发、高可用、微服务、缓存、虚拟化、海量数据处理有丰富的实战经验和解决方案。",
            timg:"/static/img/headimg/youfan.jpg"},
            {imgurl: require('../../assets/img/z4.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out1",teacher:"debug"},
            {imgurl: require('../../assets/img/z5.jpg'),price:"2447.00",sprice:"1999.00",name:"从零学习netty网络IO通讯开发视频教程",type:"out1",teacher:"debug"},
            {imgurl: require('../../assets/img/z6.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out2",teacher:"debug"},
            {imgurl: require('../../assets/img/z7.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out1",teacher:"debug"},
            {imgurl: require('../../assets/img/z8.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out1",teacher:"debug"},
            {imgurl: require('../../assets/img/z9.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out2",teacher:"debug"},
            {imgurl: require('../../assets/img/z10.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out1",teacher:"debug"},
            {imgurl: require('../../assets/img/z11.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out1",teacher:"debug"},
            {imgurl: require('../../assets/img/z12.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out2",teacher:"debug"},
          ],
          imgList2:[
            {imgurl: require('../../assets/img/j1.jpg'),price:"2447.00",sprice:"1999.00",name:"从无到有构建大型电商微服务亿级架构（第二阶段）",type:"out1"},
              {imgurl: require('../../assets/img/j2.jpg'),price:"2447.00",sprice:"1999.00",name:"基于Flink流处理的动态实时亿级用户全端数据统计分析系统（支持所有的终端统计）",type:"out1"},
            {imgurl: require('../../assets/img/j3.jpg'),price:"599.00",sprice:"549.00",name:"亿级电商微服务优惠劵系统全实现",type:"out2"},
            {imgurl: require('../../assets/img/j4.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out2"},
            {imgurl: require('../../assets/img/j5.jpg'),price:"2447.00",sprice:"1999.00",name:"从零学习netty网络IO通讯开发视频教程",type:"out2"},
            {imgurl: require('../../assets/img/j6.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out2"},
            {imgurl: require('../../assets/img/j7.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out2"},
            {imgurl: require('../../assets/img/j8.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out1"},
            {imgurl: require('../../assets/img/j9.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out2"},
            {imgurl: require('../../assets/img/j10.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out1"},
            {imgurl: require('../../assets/img/j11.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out2"},
            {imgurl: require('../../assets/img/j12.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out1"},
            {imgurl: require('../../assets/img/j13.jpg'),price:"2447.00",sprice:"1999.00",name:"PySpark 大数据处理及机器学习Spark2.3",type:"out1"},
            {imgurl: require('../../assets/img/j14.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out1"},
            {imgurl: require('../../assets/img/j15.jpg'),price:"2447.00",sprice:"1999.00",name:"SpringBoot实战历程-从菜鸟到小牛",type:"out2"},
            {imgurl: require('../../assets/img/j16.jpg'),price:"2447.00",sprice:"1999.00",name:"Docker入门到Kubernetes实战",type:"out1"},
          ],
          imgList3:[
            {imgurl: require('../../assets/img/r1.jpg'),price:"2447.00",sprice:"1999.00",name:"[2020最新]大数据平台搭建、管理、监控利器Ambari",type:"out1"},
            {imgurl: require('../../assets/img/r2.jpg'),price:"2447.00",sprice:"1999.00",name:"Java核心技术-典型案例与面试实战系列二",type:"out1"},
            {imgurl: require('../../assets/img/r3.jpg'),price:"599.00",sprice:"549.00",name:"基于电商业务的企业级大中台从设计到实现(第二阶段)",type:"out1"},
            {imgurl: require('../../assets/img/r4.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out1"},
            {imgurl: require('../../assets/img/r5.jpg'),price:"2447.00",sprice:"1999.00",name:"从零学习netty网络IO通讯开发视频教程",type:"out1"},
            {imgurl: require('../../assets/img/r6.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out2"},
            {imgurl: require('../../assets/img/r7.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out2"},
            {imgurl: require('../../assets/img/r8.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out2"},
            {imgurl: require('../../assets/img/r9.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out1"},
            {imgurl: require('../../assets/img/r10.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out1"},
            {imgurl: require('../../assets/img/r11.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out2"},
            {imgurl: require('../../assets/img/r12.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out1"},
            {imgurl: require('../../assets/img/r13.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out2"},
            {imgurl: require('../../assets/img/r14.jpg'),price:"2447.00",sprice:"1999.00",name:"Java初中级系统架构师组合套餐课",type:"out1"},
            {imgurl: require('../../assets/img/r15.jpg'),price:"2447.00",sprice:"1999.00",name:"Go语言大型企业级电商秒杀系统实战教程",type:"out2"},
            {imgurl: require('../../assets/img/r16.jpg'),price:"2447.00",sprice:"1999.00",name:"Java架构师之企业中性能调优教程",type:"out2"},
          ],
          zonename:'',
          courses:'',
          timecourses:'',
        };
      },
      mounted() {
        this.selectData();
        this.selectByTime();
      },
      methods:{
        selectData(){
          this.$axios2.post("/showdata/homePrecinct/findAll").then(res=>{
            this.zonename = res.data;
            //console.log(this.zonename);
          }),function () {
            alert("失败!")
          }
        },
        selectByTime(){
          this.$axios2.post("/showdata/eduCourse/findByTime").then(res=>{
            this.timecourses = res.data;
            //console.log(this.timecourses);
          }),function () {
            alert("失败!")
          }
        },
      },
    }
</script>

<style scoped>
  .content div{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .a1:link,.a1:active,.a1:visited,.a1:hover{
    text-decoration:none;
  }
  .divs:hover{
    position: relative;
    top: -2px;
    left: 2px;
    box-shadow:  5px 5px 5px darkgrey ;
  }
  a {
    text-decoration: none;
  }

  .bg-light-blue{

  }
  .btn{
    background: green;
    width: 900px;
  }
</style>
